import React, {PureComponent} from "react"
import {Input, Tooltip, InputNumber} from "antd"
import "./index.less"

const getNearContainer = (triggerNode) => {
  if (triggerNode.parentNode) {
    const p = triggerNode.parentNode
    if (p.tagName.toLocaleLowerCase() === 'body') return p
    let cls = p.className ? p.className.split(' ') : []
    if (cls.some(i => i === 'zr-tooltip-container')) return p
    return getNearContainer(p)
  }else{
    return document.body
  }
}

export default class ToolTipsInput extends PureComponent {
  render() {

    const {placement, title, overlayClassName, type, getTooltipContainer, isPrice, ...other} = this.props
    const _placement = placement || 'right'
    const _overlayClassName = overlayClassName || 'primary-color-tooltip'

    const container = getNearContainer

    const hasPriceFix = isPrice ? { prefix: "￥", suffix: "元" } : null;

    return (
      <Tooltip trigger={"focus"}
               placement={_placement}
               overlayClassName={_overlayClassName}
               getTooltipContainer={getTooltipContainer || container}
               title={title}>
        {
          type === 'password'
            ? <Input.Password {...other}/>
            : <Input {...hasPriceFix} {...other}/> 
        }
      </Tooltip>
    )
  }
}